<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cutePsWheel 0.9.3 Demo</title>
<script type="text/javascript" src="cutePsWheel_0_9_3.js"></script>
<style type="text/css">
body{ margin:0; padding:0; background:#FAFAFA;}
#panel{ font-size:12px; color:#333; padding:10px 10px; background:#EDF2ED; width:790px; margin:auto;}
h4{ background:#398B8B; font-size:16px; text-align:center; color:#fff; padding:10px; width:790px; margin:10px auto 0 auto;}
fieldset{ margin:0 60px; padding:0 20px;}
span{ color:#008000; font-size:12px; padding-left:8px;}
code{ font-size:12px; display:block; background:#fefefe; color:#d00; border:dotted 1px #dda;}
.comment{background:#D8F0EA; font-size:12px; border:solid 1px #BCDED6; margin:10px 60px 0 60px; padding:10px; color:#333;}
h5{ font-size:12px; margin:0; font-weight:normal; color:#333;}
a{ font-size:12px; text-decoration:none; color:#fff; font-weight:normal; float:right; margin:0 4px;}
</style>
</head>

<body>
<div id="main">
	<h4>CutePsWheel javascript libary demo<a href="demo.html" title="Simple Chinese Version">Simple Chinese&raquo;&raquo;</a><a href="cutePsWheel_0_9_3.js" target="_blank" title="download">Download&raquo;&raquo;</a><a href="http://www.51obj.cn/" title="homepage">Homepage&raquo;&raquo;</a></h4>
	<div id="panel">
	<fieldset>
		<legend title="demo">demo</legend>
		<p><strong>Tips:</strong>Scroll the mouse wheel when the cursor hovers the input</p>
		<p><label for="txt1">Example1：</label><input id="txt1" type="text" rel="wheel" /><span>Add rel=&quot;wheel&quot;</span></p>
		<p><label for="txt2">Example2：</label><input id="txt2" type="text" rel="wheel" value="0" /><span>Add rel=&quot;wheel&quot; value=&quot;0&quot;</span></p>
		<p><label for="txt3">Example3：</label><input id="txt3" type="text" rel="wheel" value="0" interval="2" /><span>Add rel=&quot;wheel&quot; value=&quot;0&quot; interval=&quot;2&quot;</span></p>
		<p><label for="txt4">Example4：</label><input id="txt4" type="text" rel="wheel" value="0" interval="0.2" /><span>Add rel=&quot;wheel&quot; value=&quot;0&quot; interval=&quot;0.2&quot;</span></p>
		<p><label for="txt5">Example5：</label><input id="txt5" type="text" rel="wheel" value="2" /><span>Add rel=&quot;wheel&quot; value=&quot;2&quot;</span></p>
		<p><label for="txt6">Example6：</label><input id="txt6" type="text" rel="wheel" value="2" interval="0.2" /><span>Add rel=&quot;wheel&quot; value=&quot;2&quot; interval=&quot;0.2&quot;</span></p>
		<p><label for="txt7">Example6：</label><input id="txt6" type="text" rel="wheel" value="2.2" interval="0.1" /><span>Add rel=&quot;wheel&quot; value=&quot;2.2&quot; interval=&quot;0.1&quot;</span></p>
	</fieldset>
		<div class="comment">
			<h5>Description:</h5>
			<p>CutePsWheel javascript libary is a javascript libary which allows control the type of text input box can scroll value plus or minus like Photoshop. </p>
			<h5>How to:</h5>
			<ul>
				<li>Import the <em>CutePsWheel js</em>;
				<code>&lt;script type=&quot;text/javascript&quot; src=&quot;cutePsWheel_0_9_3.js&quot;&gt;&lt;/script&gt;</code></li>
				<li>Add the property rel=&quot;wheel&quot; to the text type of input when needed;</li>
				<li>Add the property interval to set the interval value of one scrool(default 1),it's optionaled.</li>
			</ul>
		</div>
  </div>
</div>
<div id="shadow"></div>
</body>
</html>
